<template>
	<view class="category">
		<canvas canvas-id="canvas1" class="share__canvas canvas1 "></canvas>
		<view class="btns" :style="{background: newColor.color}" @tap="saveAIshare">保存图片</view>
		<view class="onepix">
			<!-- <view data-type="text" class="draw_canvas line" style="">.</view> -->
			<view class="wbk share__canvas share__canvas1">
				<view class="nbk">
					<view class="top draw_canvas">
						<image :src="bgImg" data-type="image" class="draw_canvas topimg" :data-url="bgImg"></image>
					</view>
					<view class="draw_canvas fiexd_img">
						<image :src="cardData.cover" data-type="image" mode="" class="draw_canvas center_img" :data-url="cardData.cover"></image>
					</view>
					<view class="bottom_name draw_canvas">
						<p data-type="inline-text" class="title draw_canvas" :data-text="'网格长'+master.user_name">网格长：{{master.user_name}}</p>
						<p data-type="inline-text" class="title draw_canvas" :data-text="'服务点'+location.shop_name">服务点：{{location.shop_name}}</p>
					</view>
					<view class="price_title draw_canvas"><text data-type="inline-tex在t" class="title draw_canvas" data-text="#长按图片扫一扫,更多精选抢先购">#长按图片扫一扫,更多精选抢先购</text></view>
					<view class="ewm cxm"><image :src="linshiUrl" data-type="radius-image" mode="" class="draw_canvas center_img" :data-url="linshiUrl"></image></view>
				</view>
			</view>
		</view>
		<ourLoading isFullScreen :active="active" text="海报生成中..." />
	</view>
</template>

<script>
import Wxml2Canvas from 'wxml2canvas'; // 根据具体路径修改，node_modules会被忽略
import {getGoods} from '@/static/utils/ahth.js'
export default {
	data() {
		return {
			imgs: '',
			show: false,
			sharePopup: 'none',
			canvas_show: 'none',
			active: true,
			cid: '',
			cardData: {},
			linshiUrl:'',
			location:{
				shop_name:'暂无'
			},
			city:'',
			master:{
				user_name:'暂无'
			},
			bgImg: ''
		};
	},
	onLoad(val) {
		// this.cardData = getGoods() 
		this.getUserInfo()
		console.log(this.cardData);
		this.getConfig()
		setTimeout(() => {
			this.active = false;
		}, 800);
	},
	mounted() {},
	methods: {
		toggleSpec() {
			if (this.sharePopup === 'show') {
				this.sharePopup = 'hide';
				setTimeout(() => {
					this.sharePopup = 'none';
				}, 250);
			} else if (this.sharePopup === 'none') {
				this.sharePopup = 'show';
			}
		},
		saveAIshare() {
			uni.showLoading({
				title:'保存中...'
			})
			setTimeout(()=>{
				wx.saveImageToPhotosAlbum({
					filePath: this.imgs,
					success(res) {
						uni.hideLoading()
						wx.showToast({
							title: '保存成功',
							icon: 'success'
						});
					},
					fail() {
						wx.showToast({
							title: '保存失败',
							icon: 'none'
						});
					}
				});
			},1000)
		},
		fdrawImage1() {
			let self = this;
			self.canvas_show = 'show';
			this.drawImage1 = new Wxml2Canvas({
				width: '375', // 宽， 以iphone6为基准，传具体数值，其他机型自动适配
				height: '1200', // 高
				element: 'canvas1',
				background: '#F7F7F7',
				progress(percent) {},
				finish(url) {
					console.log('finish=', url);
					self.canvas_show = 'none';
					self.imgs = url;
				},
				error(res) {
					console.log('error=', res);
				}
			});

			let data = {
				list: [
					{
						type: 'wxml',
						class: '.share__canvas1 .draw_canvas', // draw_canvas指定待绘制的元素
						limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
						x: 0,
						y: 0
					},
					{
						type: 'rect',
						class: '.ewm .draw_canvas', // draw_canvas指定待绘制的元素
						limit: '.share__canvas1', // 限定绘制元素的范围，取指定元素与它的相对位置
						x: 0,
						y: 405,
						style: {
							width: 375,
							height: 240,
							fill: '#fff'
						}
					}
				]
			};
			this.drawImage1.draw(data);
		},
		getUserInfo() {
			this.request('user/getUserInfo', {}).then(res => {
				if(res.code == 200){
					console.log(res);
					this.linshiUrl = res.data.applet_qrcode
					this.getdefault(res.data.goods_point_id);
					this.getMasters(res.data.leader_id);
				}
			});
		},
		getdefault(id) {
			//获取用户默认的提货点
			this.request('user/getGoodsPointLeaderInfo', {
				type: 1,
				type_id: id
			}).then(res => {
				console.log(res);
				if(res.code == 200){
					this.location = res.data;
					if (this.location.address && this.location.address !== '') {
						this.city = this.location.address;
					}
				}
			});
		},
		getMasters(id) {
			this.request('user/getGoodsPointLeaderInfo', {
				type: 2,
				type_id: id
			}).then(res => {
				console.log(res);
				if(res.code == 200){
					this.master = res.data;
				}
				this.fdrawImage1();
			});
		},
		getConfig(){
			this.request('common/getConfig',{})
			.then(res=>{
				this.bgImg = res.data.day_recommend
			})
		}
	}
};
</script>

<style lang="scss" scoped>
.category {
	padding: 20upx 27upx 30upx;
	background: #f0f0f0;
	position: relative;
	.wbk {
		width: 92vw;
		height: 160vw;
		box-sizing: border-box;
		overflow: hidden;
		background-color: #f7f7f7;
		border-radius: 15upx;
		.nbk {
			overflow: hidden;
			position: relative;
			.top_title {
				overflow: hidden;
				height: 60upx;
				line-height: 60upx;
				width: 100%;
				text-align: center;
				position: absolute;
				top: 45upx;
				left: 0;
				.title {
					font-size: 32upx;
					font-family: PangMenZhengDao;
					font-weight: 400;
					color: rgba(4, 4, 4, 1);
					z-index: 10;
					background-color: rgba($color: #000000, $alpha: 0);
				}
			}
			.top {
				width: 92vw;
				height: 160vw;
				overflow: hidden;
				margin: 0 auto;
				display: block;
				image {
					height: 100%;
					width: 100%;
					display: block;
					border-radius: 15upx;
				}
			}
			.topimg {
				// margin: 17 * 75/42upx;
				box-sizing: border-box;
				overflow: hidden;
				float: left;
			}
			.fiexd_img {
				position: absolute;
				top: 48%;
				left: 50%;
				height: 530upx;
				width: 560upx;
				border-radius: 15upx;
				transform: translate(-50%, -50%);
				image {
					width: 100%;
					height: 100%;
					display: block;
					border-radius: 15upx;
				}
			}
			.service {
				text-align: left;
				float: left;
				margin-top: 30upx;
				margin-left: 20upx;
				.text {
					color: #f06c7a;
					font-size: 32upx;
					font-weight: bold;
					display: inline;
					vertical-align: middle;
				}
				.span {
					font-size: 24upx;
					color: #f06c7a;
				}
			}
			.bottom_name {
				position: absolute;
				// height: 100upx;
				width: 400upx;
				left: 40upx;
				bottom: 80upx;
				overflow: hidden;
				text-overflow: ellipsis;
				font-size: 28upx;
				color: #FFFFFF;
				.left {
					width: 50%;
					color: #999;
					font-size: 32upx;
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
					text {
						display: block;
					}
				}
				.right {
					overflow: hidden;
					border-radius: 50%;
					width: 200upx;
					margin: 0 auto;
					.img {
						width: 200upx;
						height: 200upx;
						image {
							width: 100%;
							height: 100%;
							display: block;
							margin: 0 auto;
						}
					}
				}
			}
			.price_title {
				position: absolute;
				height: 40upx;
				// width: 350upx;
				left: 40upx;
				// background-color: #FFFFFF;
				bottom: 20upx;
				line-height: 40upx;
				border-radius: 20upx;
				.title {
					font-size: 24upx;
					font-family: Source Han Sans CN;
					font-weight: 500;
					color: #FFFFFF;
				}
			}
			.foot {
				color: #999;
				font-size: 32upx;
				padding: 32upx;
			}
			.title{
				margin-bottom: 20upx;
			}
			.jiage {
				overflow: hidden;
				.title1 {
					text-align: center;
					font-size: 30upx;
					color: #ff6a00;
					float: left;
					margin-right: 20upx;
				}
				.images {
					height: 40upx;
					width: 40upx;
					float: left;
				}
				.title2 {
					font-size: 32upx;
					color: #f06c7a;
					float: left;
				}
			}
			.cxm {
				overflow: hidden;
				position: absolute;
				height: 190upx;
				width: 190upx;
				right: 35upx;
				bottom: 35upx;
				border-radius: 50%;
				background-color: #FFFFFF;
				padding: 10upx;
				image {
					width: 100%;
					height: 100%;
					display: block;
				}
			}
		}
	}
}
.btns {
	width: 70%;
	height: 82upx;
	font-size: 32upx;
	font-weight: 500;
	line-height: 82upx;
	text-align: center;
	// background: linear-gradient(-86deg, rgba(247, 133, 93, 1), rgba(255, 94, 102, 1));
	background-color: #fee15c;
	color: #ffffff;
	border-radius: 14upx;
	margin: 0 auto;
	margin-top: 40upx;
}

// ***************************************
.show {
	display: block;
}
.none {
	display: none;
}
.canvas_show {
	width: 1upx;
	width: 1upx;
	overflow: hidden;
	z-index: -10000;
	position: absolute;
}
.onepix {
	position: relative;
	z-index: -999;
	overflow: hidden;
	opacity: 0;
	top: 0;
	height: 1upx;
}
.share__title {
	width: 100%;
	margin-left: 80upx;
	margin-bottom: 40upx;
}

.share__canvas {
	width: 92vw;
	height: 160vw;
	margin-bottom: 40upx;
	overflow: hidden;
	border-radius: 15upx;
	margin: 0 auto;
}
.share__canvas1 {
	// position: relative;
}
.share__canvas1-text {
	color: #000000;
}

.share__canvas1-text-2 {
	color: #ff0000;
	font-size: 36upx;
	margin-left: 20upx;
	margin-top: 20upx;
}
.share__canvas1-text-3 {
	color: #00ff00;
	padding-left: 40upx;
	padding-top: 20upx;
}
.share__canvas1-text-4 {
	color: #0000ff;
	margin-left: 20upx;
	margin-top: 20upx;
	width: 600upx;
	text-align: center;
	background: rgba(255, 0, 0, 0.4);
	padding: 20upx;
}

.share__canvas1-text-5 {
	color: #0000ff;
	margin-left: 20upx;
	margin-top: 20upx;
	width: 600upx;
	background: rgba(255, 0, 0, 0.4);
	padding: 20upx;
}

.share__canvas2 {
	position: relative;
}
.share__canvas2-image {
	width: 200upx;
	height: 120upx;
	border: 2px solid #ff0000;
	margin: 10upx 20upx;
	box-shadow: 20upx 20upx 10upx #cccccc;
}
.share__canvas2-image-2 {
	width: 120upx;
	height: 120upx;
	border: 2px solid #ff0000;
	margin: 10upx 20upx;
	box-shadow: 20upx 20upx 10upx #cccccc;
	border-radius: 100%;
}

.share__canvas2-image-3 {
	width: 200upx;
	height: 120upx;
	border: 2px solid #ff0000;
	margin: 10upx 20upx;
	background-size: 200upx 120upx;
}
/*  弹出层 */
.popup {
	position: fixed;
	left: 0;
	top: 0;
	right: 0;
	bottom: 0;
	z-index: 99;
	&.show {
		display: block;
		.mask {
			animation: showPopup 0.2s linear both;
		}
		.layer {
			animation: showLayer 0.2s linear both;
		}
	}
	&.hide {
		.mask {
			animation: hidePopup 0.2s linear both;
		}
		.layer {
			animation: hideLayer 0.2s linear both;
		}
	}
	&.none {
		display: none;
	}
	.mask {
		position: fixed;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 1;
		background-color: rgba(0, 0, 0, 0.4);
	}
	.layer {
		position: fixed;
		z-index: 99;
		bottom: 0;
		width: 100%;
		min-height: 40vh;
		border-radius: 10upx 10upx 0 0;
		background-color: #fff;
		.btn {
			height: 82upx;
			line-height: 82upx;
			border-radius: 100upx;
			/* background: $uni-color-primary; */
			/* font-size: $font-base + 2upx; */
			background: linear-gradient(to right, #ff8256, #f34644) !important;
			color: #fff;
			margin: 30upx auto 20upx;
			font-size: 38upx;
		}
	}
	@keyframes showPopup {
		0% {
			opacity: 0;
		}
		100% {
			opacity: 1;
		}
	}
	@keyframes hidePopup {
		0% {
			opacity: 1;
		}
		100% {
			opacity: 0;
		}
	}
	@keyframes showLayer {
		0% {
			transform: translateY(120%);
		}
		100% {
			transform: translateY(0%);
		}
	}
	@keyframes hideLayer {
		0% {
			transform: translateY(0);
		}
		100% {
			transform: translateY(120%);
		}
	}
}
.share__canvas3 {
	padding: 30rpx;
	box-sizing: border-box;
}
.share__canvas3-inline {
	display: inline;
	vertical-align: middle;
	line-height: 50rpx;
}

.share__canvas3-inline_bold {
	font-weight: bold;
}
</style>
<style>
page {
	background-color: #f0f0f0;
}
</style>
